<template>
    <div class="container">
        <van-nav-bar title="EMS寄递预约" left-arrow @click-left="onClickLeft" />
        <div class="container-send">
            <div class="container-send-title">寄材料</div>
            <div class="container-send-form">
                <van-form>
                    <van-cell-group inset>
                        <van-field v-model="formData.senderName" name="senderName" label="寄件人姓名" placeholder="请输入" />
                        <van-field v-model="formData.senderTelphone" name="senderTelphone" label="寄件人手机号码"
                            placeholder="请输入" />
                        <van-field v-model="formData.senderAddress" name="senderAddress" label="寄件人地址"
                            placeholder="请输入" />

                        <van-field v-model="formData.senderType" is-link readonly label="寄件方式" placeholder="请选择"
                            @click="showPicker = true" />
                        <van-popup v-model:show="showPicker" round position="bottom">
                            <van-picker :columns="sendColumns" @cancel="showPicker = false" @confirm="onConfirm" />

                        </van-popup>
                        <van-field v-model="formData.senderDate" name="senderDate" label="寄件日期" placeholder="请输入" />
                    </van-cell-group>
                </van-form>
            </div>
        </div>
        <div class="container-send">
            <div class="container-send-title">收证照</div>
            <div class="container-send-form">
                <van-form>
                    <van-cell-group inset>
                        <van-field v-model="formData.recipientName" name="recipientName" label="收件人姓名"
                            placeholder="请输入" />
                        <van-field v-model="formData.recipientTelphone" name="recipientTelphone" label="收件人手机号码"
                            placeholder="请输入" />
                        <van-field v-model="formData.recipientAddress" name="recipientAddress" label="收件人地址"
                            placeholder="请输入" />

                        <van-field v-model="formData.recipientType" is-link readonly label="收件方式" placeholder="请选择"
                            @click="showPicker1 = true" />
                        <van-popup v-model:show="showPicker1" round position="bottom">
                            <van-picker :columns="recipientColumns" @cancel="showPicker1 = false"
                                @confirm="onConfirm1" />
                        </van-popup>

                    </van-cell-group>
                </van-form>
            </div>
        </div>
        <div class="container-confirm">
            <van-button style="width: 85%;margin-bottom: 10px;" type="primary">
                确认提交
            </van-button>
            <van-button style="width: 85%;margin-bottom: 10px;" plain type="primary" @click="previouStep">
                上一步
            </van-button>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const { reactive, ref } = require("@vue/reactivity");
const router = useRouter()
const formData = reactive({
    senderName: '',
    senderTelphone: '',
    senderAddress: '',
    senderType: '',
    senderDate: '',
    recipientName: '',
    recipientTelphone: '',
    recipientAddress: '',
    recipientType: ''


})
const sendColumns = [
    { text: '上门取件', value: '0' },
    { text: '网点自寄', value: '1' },
    { text: '快递柜自寄', value: '2' },
]
const recipientColumns = [
    { text: '上门取件', value: '0' },
    { text: '网点自寄', value: '1' },
    { text: '快递柜自寄', value: '2' },
]
const showPicker = ref(false);
const showPicker1 = ref(false);

const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    formData.senderType = selectedOptions[0].text;
};
const onConfirm1 = ({ selectedOptions }) => {
    showPicker1.value = false;
    formData.recipientType = selectedOptions[0].text;
};
const onClickLeft = () => history.back();
const previouStep = () => {
    router.push({
        name: 'UploadFile'
    })
}
</script>

<style lang="scss" scoped>
.container {
    &-send {

        &-title {
            margin: 10px 15px;
            text-align: left;
            font-weight: bold;
        }

        &-from {
            width: 100%
        }
    }

    &-confirm {
        margin-top: 30px;
    }
}
</style>